<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="" value="2222aaa">
    <script>
        // 数字转成字符串，字符串转成数字，数字转成布尔

        // 计算数据从 页面来，而页面中东西都是字符串

        //         ### 其他数据类型转成数值

        // 1. `Number(变量)`

        // - 可以把一个变量强制转换（显示转换）成数值类型
        //   - 可以转换小数，会保留小数
        //   - 可以转换布尔值
        //   - 遇到不可转换的都会返回 `NaN`(出现字母)

        // 适合纯数字的字符串

        // var str1 = '123';
        // var str1 = '123.1';
        var str1 = '123.1a';
        // 强制转换（显示转换）
        var num1 = Number(str1);
        console.log(num1);
        // console.log(str1);

        // 2. `parseInt(变量)`

        // - 从第一位开始检查，是数字就转换，直到一个不是数字的内容
        //   - 开头就不是数字，那么直接返回 `NaN`
        //   - 不认识小数点，只能获取整数

        var r4 = parseInt('12.1');
        console.log(r4);//12
        console.log(parseInt('12'));//12
        console.log(parseInt('12px'));//12
        console.log(parseInt('a12px'));//NaN
        console.log(parseInt('1a2px'));//1


        // 3. `parseFloat(变量)`

        // - 从第一位开始检查，是数字就转换，直到一个不是数字的内容
        // - 开头就不是数字，那么直接返回 `NaN`
        // - 认识一次小数点
        console.log(parseFloat('12.1'));//12.1
        console.log(parseFloat('12.1px'));//12.1
        console.log(parseFloat('a12.1px'));//NaN
        console.log(parseFloat('1.2a2px'));//1.2
        console.log(parseFloat('1a2px'));//1

        // 4. 除了加法以外的数学运算
        //    - 运算符两边都是可运算数字才行
        //    - 如果运算符任何一边不是一个可运算数字，那么就会返回 `NaN`
        //    - 加法不可以用

        // 隐式转换***
        // 如果任意一边是一个字符串，js会尝试使用Number（'2'）进行转化
        console.log(1 - '2');//-1
        console.log(1 * '2');//2
        console.log(1 * '2px');//NaN


        // 拼接字符串
        // 加法--两边 只要一个字字符串，就会将两个数据 拼接到一起
        console.log(1 + '2');// '12'
        console.log('222' + '4');// '2224'
        console.log('' + 2);// '2'

        // 从做到右  先算 '' + 2 -》'2'
        // 再算 '2'-3 ->-1
        console.log('' + 2 - 3);//-1





    </script>

</body>

</html>